import Vue from "vue";
import VueRouter from "vue-router";

import AppHeader from "../Layout/AppHeader";
import AppFooter from "../Layout/AppFooter";

import HomeView from "../views/Home";
import ListView from "../views/List";
import CarView from "../views/Car";
console.log(22222,CarView);
import MineView from "../views/Mine";

// import LoginView from '../views/Login/index.vue'
import LoginView from "../views/Login";
import LoginAccountView from "../views/Login/Account";
import LoginCodeView from "../views/Login/Code";

import DetailView from "../views/Detail";
import DetailCopyView from "../views/DetailCopy";
import NotFoundView from "../views/NotFound";

Vue.use(VueRouter); //在Vue中使用插件 vue-router

// 有一个项目已经开发好了
// 官网首页: https://www.laowang.com/
// 更新了: https://www.laowang.com/home

// 路由配置
const routes = [
  // 重定向
  // {
  //   path:"/",  // 如果访问 / => 重定向到 /home
  //   redirect:"/home", // router.replace("/home")
  // },

  // {
  //   path:"/",
  //   component: HomeView
  // },
  {
    path: "/home",
    alias: "/", // 别名
    name: "home", // 命名路由
    meta: { title: "首页" },   // 定义路由的时候可以配置 meta 字段(健值为对象)： => 存储一些数据
    // component: HomeView, // 单个组件 => 默认HomeView展示到name='default'的视图(默认视图)中,
    components: {
      header: AppHeader,
      default: HomeView,
      footer: AppFooter,
    },
  },
  {
    path: "/list",
    name: "list",
    meta: { title: "列表" ,isBack:true},
    // component: ListView,
    components: {
      header: AppHeader,
      default: ListView,
      footer: AppFooter,
    },
  },
  {
    path: "/detail",
    name: "detail",
    meta: { title: "详情" ,isBack:true},
    component: DetailView,
  },
  {
    // 一级路由  /detail-copy
    // /:gid/:a/:b   动态路径参数  在路径中接收三个参数,少一个就不生效
    path: "/detail-copy/:gid/:a/:b",
    name: "detail-copy",
    meta: { title: "详情" ,isBack:true},
    // component: DetailCopyView,
    components: {
      header: AppHeader,
      default: DetailCopyView,
    },
  },
  {
    path: "/car",
    name: "car",
    meta: { title: "购物车",isBack:true },
    // component: CarView
    components: {
      header: AppHeader,
      default: CarView,
      footer: AppFooter,
    },
  },
  {
    path: "/mine",
    name: "mine",
    meta: { title: "我的",isBack:true },
    // component: MineView,
    components: {
      header: AppHeader,
      default: MineView,
      footer: AppFooter,
    },
  },
  {
    path: "/login",
    meta:{title:"登录"},
    // component: LoginView
    components: {
      header: AppHeader,
      default: LoginView,
    },
    // 在一级视图对应/login路由配置二级试图,以及子路由
    children: [
      {
        // 默认配置
        path: "", // 如果只访问一级路由    /login + ""  => /login
        name: "login",
        // component:LoginAccountView  // 默认渲染LoginAccountView
        // redirect:"/login/account",
        // redirect: "account",
        redirect: function (from) {    // /login -> /login/account
          console.log(111111);
          return { name: "account", query: from.query }
        }
      },
      {
        path: "/login/account", // 如果path路径以/(根路由)开头, 写全部路径  /login/account
        name: "account",
        meta: { title: "账号登录" ,isBack:true},
        component: LoginAccountView,
      },
      {
        path: "code", // 如果path路径没有以/根路由开头(相对路径)  此路径会默认作为上级路由的子路由  /login/code
        name: "code",
        meta: { title: "验证码登录",isBack:true },
        component: LoginCodeView,
      },
    ],
  },
  {
    path: "/about",
    name: "about",
    meta: { title: "我的" ,isBack:true},
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由懒加载  -> 当路由被访问时, 才会激活组件, 组件开始加载
    component: () => import(/* webpackChunkName: "about" */ "../views/About"),
  },
  {
    path: "/404",
    name: "not-found",
    meta: { title: "404" },
    component: NotFoundView,
  },
  {
    path: "*", // 匹配所有路由(除上述配置外 -> 都会被*匹配 => 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：)  => 告诉你 * 匹配了啥?
    // component: NotFoundView,

    //  如果匹配的路由地址 在上述配置中不存在 (/aaa ) -> 跳转到 /404
    // redirect:"/404",  // 接收一个字符串 -> 指定重定向的路由地址
    // redirect:{path:"/404",name:"not-found"},  // 接收一个对象
    redirect: (from) => {
      // 接收一个函数  => 可以知道从哪个路由地址跳转的/404,可以将错误路径信息传递给/404路由
      console.log("from", from); // from.params.pathMatch
      return {
        path: "/404",
        name: "not-found",
        query: { wd: from.params.pathMatch },
      };
    },
  },
];

// 创建路由实例
const router = new VueRouter({
  // mode: 'history',    /list
  mode: "hash", //   #/list
  base: process.env.BASE_URL,
  routes,
});

export default router;
